import './WijmoA01.scss'

import { getData } from '../Data'
import { useState } from 'react'
import { useMount, useReactive } from 'ahooks'
import { format, SortDescription } from "@grapecity/wijmo"
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'


const WijmoA01 = () => {
    const [Data, setData] = useState()
    const [selectedItem, setselectedItem] = useState()
    const InitData = useReactive({ init: null })

    useMount(() => {
        setData(getData(20000))
    })

    const init = (e) => {
        InitData.init = e
        let sd = new SortDescription("country", true)
        e.collectionView.sortDescriptions.push(sd)
        e.collectionView.currentChanged.addHandler(pText)
        pText()
    }

    const pText = () => {
        const selectedItem = format("大洲: <b>{country}</b>, 时间: <b>{date}</b> 数字: <b>{amount:c0}</b>", InitData.init.collectionView.currentItem)
        setselectedItem(selectedItem)
    }

    return (
        <div className='Page WijmoA01'>
            <div className='Content' dangerouslySetInnerHTML={{ __html: selectedItem }} />
            {Data &&
                <FlexGrid initialized={init} itemsSource={Data}>
                    <FlexGridColumn header="大洲" binding="country" width="*" />
                    <FlexGridColumn header="时间" binding="date" width="*" />
                    <FlexGridColumn header="数字" binding="amount" width="*" format="n2" />
                </FlexGrid>
            }
            <div>Ps 如何初始化数据并检测用户点击</div>
            <div>Ps 数据格式与设置</div>
        </div>
    )
}

export default WijmoA01;